Handling NULL Values

When working with real-world data, you'll often encounter NULL, undefined, or invalid values. Muze provides powerful tools to handle these values consistently across your visualizations, from simple display text replacement to advanced conditional formatting.

Replacing Invalid Values Globally

Basic Syntax

Use setGlobalOptions to set a custom replacement text for all invalid values:

const { muze, setGlobalOptions } = viz;

setGlobalOptions({
    displayAs: {
        invalidValue: "N/A"
    }
});

Complete Example

This example demonstrates how to display NULL values with a custom marker in a text visualization:

/**
 * Available Columns:
 * "Ship Mode"
 * "Total Discount"
 * --- END --- 
 */

const {
    muze,
    globalOptions,
    getDataFromSearchQuery,
    setGlobalOptions
} = viz;

setGlobalOptions({
    displayAs: {
        invalidValue: "[[NULL]]"
    }
});

const data = getDataFromSearchQuery();

muze.canvas()
.columns(["Ship Mode"])
.rows(["Total Discount"])
.layers([{
    mark: "bar",
}])
.data(data)
.mount("#chart");

Checking for Invalid Values

For advanced scenarios, you may need to detect invalid values programmatically to apply custom logic or formatting.

const { isMuzeInvalidValue } = viz;

// Returns true if value is NULL, undefined, or invalid
const isInvalid = isMuzeInvalidValue(value);

Example: Custom Axis Formatting for NULL Values

This example shows how to apply different formatting to axis labels based on whether the value is invalid

/**
 * Available Columns:
 * "Ship Mode"
 * "Total Discount"
 */

const {
    muze,
    globalOptions,
    getDataFromSearchQuery,
    isMuzeInvalidValue
} = viz;

const data = getDataFromSearchQuery();

muze.canvas()
    .rows(["Total Discount"])
    .columns(["Ship Mode"])
    .layers([{
        mark: "bar"
    }])
    .config({
        axes: {
            x: {
                tickFormat: (dataInfo) => {
                    // Check if the value is invalid
                    if (isMuzeInvalidValue(dataInfo.rawValue)) {
                        return "[XYZ]";
                    }
                    // Use the default formatted value
                    return dataInfo.formattedValue;
                }
            }
        }
    })
    .data(data)
    .mount("#chart");